<template>
    <div class="userInformationView">
        <div class="userInformationCard">
            <div class="leftSection">
                <div class="avatarUpload">
                    <img :src="userInfo?.avatarPath ? (baseUrl + userInfo?.avatarPath ) : getDefaultAvatar()" alt="用户头像"
                        class="avatar">
                    <div class="uploadButton">
                        <span class="iconfont icon-likesprogrambianji"></span>
                        上传头像
                    </div>
                </div>
                <div class="registerTime">
                    注册时间
                    <div class="time">{{ userInfo?.regTime || '-' }}</div>
                </div>
            </div>
            <div class="rightSection">
                <div class="editButton" @click="editProfile">
                    <span class="iconfont icon-likesprogrambianji"></span>
                    编辑资料
                </div>
                <div class="formGroup">
                    <div class="formItem">
                        <div class="label">用户名</div>
                        <input type="text" :value="userInfo?.userName" @input="(e) => handleInput(e, 'userName')"
                            :disabled="!isEditing" class="input">
                    </div>
                    <div class="formItem">
                        <div class="label">昵称</div>
                        <input type="text" :value="userInfo?.nickName" @input="(e) => handleInput(e, 'nickName')"
                            :disabled="!isEditing" class="input">
                    </div>
                    <div class="formItem">
                        <div class="label">电子邮箱</div>
                        <input type="email" :value="userInfo?.userEmail" @input="(e) => handleInput(e, 'userEmail')"
                            :disabled="!isEditing" class="input">
                    </div>
                    <div class="formItem">
                        <div class="label">电话号码</div>
                        <input type="tel" :value="userInfo?.phoneNumber" @input="(e) => handleInput(e, 'phoneNumber')"
                            :disabled="!isEditing" class="input">
                    </div>
                    <div class="formItem">
                        <div class="label">个人简介</div>
                        <textarea :value="userInfo?.resume" @input="(e) => handleInput(e, 'resume')"
                            :disabled="!isEditing" class="textarea"
                            :placeholder="userInfo?.resume?.trim() ? '' : '他还未填写个人简介~~~'"></textarea>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
export default {
    name: 'userInformationView',
}
</script>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { userApi } from '@/api/Users';
import { userAvatar as defaultAvatar } from '@/types/Base64Image';
import { UserData } from '@/types/UserData';
import { useRouter } from 'vue-router';
import { baseUrl } from '@/util/request';

// 用户信息
const userInfo = ref<UserData | undefined>();
const isEditing = ref(false);
const router = useRouter();

// 处理输入
type EditableFields = 'userName' | 'nickName' | 'userEmail' | 'phoneNumber' | 'resume';
const handleInput = (event: Event, field: EditableFields) => {
    if (!userInfo.value || !isEditing.value) return;
    const target = event.target as HTMLInputElement | HTMLTextAreaElement;
    userInfo.value[field] = target.value;
};

// 获取默认头像
const getDefaultAvatar = () => {
    return defaultAvatar();
};

// 编辑资料
const editProfile = () => {
    isEditing.value = !isEditing.value;
    if (!isEditing.value && userInfo.value) {
        // 保存用户信息
        saveUserInfo();
    }
};

// 保存用户信息
const saveUserInfo = () => {
    if (!userInfo.value) return;

    // TODO: 需要实现 updateUserInfo API
    // userApi.updateUserInfo({
    //     userName: userInfo.value.userName,
    //     nickName: userInfo.value.nickName,
    //     userEmail: userInfo.value.userEmail,
    //     phoneNumber: userInfo.value.phoneNumber,
    //     resume: userInfo.value.resume,
    // }).then(() => {
    //     // 更新成功后重新获取用户信息
    //     getUserInfo();
    // });
};

// 获取用户信息
const getUserInfo = async () => {
    try {
        // 强制从服务器获取最新数据
        const userData = await userApi.getLoginUserData(true);
        console.log('获取到的用户信息:', userData);

        if (!userData) {
            console.error('未获取到用户信息或 token 已过期');
            // 重定向到登录页
            router.push('/loginRegister');
            return;
        }

        userInfo.value = userData;
    } catch (error) {
        console.error('获取用户信息失败:', error);
        // 重定向到登录页
        router.push('/loginRegister');
    }
};

onMounted(() => {
    getUserInfo();
});
</script>

<style src="@/assets/icons/iconfont.css" scoped></style>

<style scoped>
.userInformationView {
    width: 100%;
    height: 100%;
    padding: 20px;
}

.userInformationCard {
    background: rgba(255, 255, 255, .5);
    backdrop-filter: blur(2rem);
    border-radius: 10px;
    padding: 30px;
    display: flex;
    gap: 40px;
}

.leftSection {
    width: 200px;
}

.avatarUpload {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.avatar {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
}

.uploadButton {
    background: rgb(65, 185, 255);
    color: white;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
}

.uploadButton:hover {
    background: rgba(65, 185, 255, 0.8);
}

.registerTime {
    margin-top: 20px;
    text-align: center;
    color: #666;
    font-size: 14px;
}

.registerTime .time {
    margin-top: 5px;
    color: #333;
}

.rightSection {
    flex: 1;
    position: relative;
}

.editButton {
    position: absolute;
    right: 0;
    top: 0;
    background: rgb(65, 185, 255);
    color: white;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
}

.editButton:hover {
    background: rgba(65, 185, 255, 0.8);
}

.formGroup {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.formItem {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.label {
    font-size: 14px;
    color: #666;
}

.input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 14px;
    background: white;
}

.input:disabled {
    background: #f5f5f5;
    cursor: not-allowed;
}

.textarea {
    width: 100%;
    height: 100px;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 14px;
    resize: none;
    background: white;
}

.textarea:disabled {
    background: #f5f5f5;
    cursor: not-allowed;
}

.iconfont {
    font-size: 16px;
}
</style>